<template>
	<view class="container999">
		<view class="title">体检预约</view>
		<!-- 体检信息 -->
		<view class="seat-info">
			<image class="seat-image" :src="`http://localhost:8888${seatInfo.touxiang}`" mode="aspectFill"></image>
			<view class="seat-details">
				<view class="info-item">
					<text class="label">名称：</text>
					<text class="value">{{ seatInfo.sheyingshixingming }}</text>
				</view>
				<view class="info-item">
					<text class="label">费用：</text>
					<text class="value">{{ seatInfo.jiage }}</text>
				</view>
				<view class="info-item">
					<text class="label">适合人群：</text>
					<text class="value">{{ seatInfo.dizhi }}</text>
				</view>
				<!-- <view class="info-item date-picker">
					<text class="label">预约日期：</text>
					<view class="date-btn" @click="showCalendar = true">
						<text>{{ yuyueshijian || "选择日期" }}</text>
						<u-icon name="calendar" color="#4CAF50" size="18"></u-icon>
					</view>
				</view> -->
				<view class="info-item date-picker">
					<text class="label">预约时间：</text>
					<view class="date-btn" @click="showCalendar = true">
						<text>{{ yuyueshijian || "选择日期时间" }}</text>
						<u-icon name="calendar" color="#4CAF50" size="18"></u-icon>
					</view>
				</view>
				<!-- 	<view class="info-item date-picker">
					<text class="label">预约结束时间：</text>
					<view class="date-btn" @click="showCalendar1 = true">
						<text>{{ yuyueshijian1 || "选择日期时间" }}</text>
						<u-icon name="calendar" color="#4CAF50" size="18"></u-icon>
					</view>
				</view> -->
			</view>
			<u-datetime-picker :show="showCalendar"  mode="datetime"
				@confirm="handleDateConfirm"></u-datetime-picker>
			<u-datetime-picker :show="showCalendar1" mode="datetime" @confirm="handleDateConfirm1"></u-datetime-picker>
			<view class="user-info">
				<view class="info-item">
					<text class="label">用户名：</text>
					<text class="value">{{ userInfo.yonghuming }}</text>
				</view>
				<view class="info-item">
					<text class="label">姓名：</text>
					<text class="value">{{ userInfo.yonghuxingming }}</text>
				</view>
				<view class="info-item">
					<text class="label">联系方式：</text>
					<text class="value">{{ userInfo.lianxifangshi }}</text>
				</view>
			</view>

			<!-- 预约按钮 -->
			<view class="buttonBox" @click="handleReserve"> 立即预约 </view>
		</view>
	</view>
</template>

<script>
	import {
		postZuoweiYuyue
	} from "@/request/API/xinwentongzhi/index";

	export default {
		data() {
			return {
				seatInfo: {}, // 体检信息
				userInfo: {}, // 用户信息
				yuyueshijian: "", // 预约日期
				yuyueshijian1: "", // 预约日期
				didian: "", // 预约日期
				showCalendar: false, // 控制日历显示
				showCalendar1: false, // 控制日历显示
				// minDate: new Date()
			};
		},
		onLoad(options) {
			// 获取页面传参的体检信息
			if (options.seat) {
				this.seatInfo = JSON.parse(options.seat);
			} else {
				uni.showToast({
					title: "未选择体检",
					icon: "none",
				});
				uni.navigateBack();
			}

			// 从Storage获取用户信息
			const user = uni.getStorageSync("user");
			if (user) {
				this.userInfo = {
					yonghuming: user.yonghuming,
					yonghuxingming: user.yonghuxingming,
					lianxifangshi: user.lianxifangshi,
				};
			}
		},
		methods: {
			// 日期选择确认
			handleDateConfirm(e) {
				console.log(this.$u.timeFormat(e.value, "yyyy-mm-dd hh:MM:ss"))
				this.yuyueshijian = this.$u.timeFormat(e.value, "yyyy-mm-dd hh:MM");
				console.log(this.yuyueshijian)
				this.showCalendar = false;
			},
			handleDateConfirm1(e) {
				this.yuyueshijian1 = this.$u.timeFormat(e.value, "yyyy-mm-dd hh:MM");
				this.showCalendar1 = false;
			},

			// 处理预约
			async handleReserve() {
				if (!this.yuyueshijian) {
					uni.showToast({
						title: "请选择预约日期",
						icon: "none",
					});
					return;
				}

				const reserveData = {
					...this.seatInfo,
					...this.userInfo,
					sheyingshijian: this.yuyueshijian,
					didian: this.didian,
					yudingbianhao: 'YD-' + Math.floor(Math.random() * 1000000),
				};

				try {
					const res = await postZuoweiYuyue(reserveData);
					if (res.code === "0") {
						uni.showToast({
							title: "预约成功",
							icon: "success",
						});
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/diandongche/index", // 跳转到指定页面并关闭当前页面
							});
						}, 1500); // 延时 1.5 秒
					} else {
						uni.showToast({
							title: res.msg || "预约失败",
							icon: "none",
						});
					}
				} catch (error) {
					uni.showToast({
						title: "网络错误，请重试",
						icon: "none",
					});
				}
			},
		},
	};
</script>

<style lang="scss">
	.input-container {
		display: flex;
		align-items: center;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 5px 10px;
		background-color: #fff;
	}

	.input-field {
		flex: 1;
		border: none;
		outline: none;
		font-size: 14px;
		padding: 5px 0;
	}

	.input-field::placeholder {
		color: #888;
	}

	.u-icon {
		margin-left: 10px;
	}

	.container999 {
		padding: 20rpx;
		background: linear-gradient(180deg, #f0f9eb 0%, #ffffff 100%);
		min-height: 100vh;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #4a4a4a;
			padding: 30rpx;
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		}

		.seat-info {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.seat-image {
				width: 100%;
				height: 300rpx;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				object-fit: cover;
			}

			.seat-details {
				width: 100%;

				.info-item {
					width: 100%;
					margin-bottom: 30rpx;
					font-size: 30rpx;
					line-height: 1.6;
					display: flex;

					.label {
						color: #7a7a7a;
						margin-bottom: 10rpx;
					}

					.value {
						color: #333333;
						font-weight: 500;
						word-break: break-all;
					}
				}
			}
		}

		.user-info {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.info-item {
				margin-bottom: 20rpx;
				font-size: 30rpx;
				line-height: 1.6;

				.label {
					color: #7a7a7a;
					margin-right: 15rpx;
				}

				.value {
					color: #333333;
					font-weight: 500;
				}

				&.date-picker {
					display: flex;
					align-items: center;


				}
			}
		}

		.date-btn {
			width: 70%;
			flex: 1;
			display: flex;
			align-items: center;
			/* justify-content: space-between; */
			/* padding: 20rpx; */
			background: #f8f8f8;
			border-radius: 12rpx;
			color: #333333;
			font-size: 28rpx;
			transition: all 0.2s;
			margin-bottom: 10rpx;

			&:active {
				background: #e8e8e8;
				transform: scale(0.98);
			}
		}

		.buttonBox {
			width: 90%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 36rpx;
			color: #ffffff;
			background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
			border-radius: 50rpx;
			position: fixed;
			bottom: 60rpx;
			left: 5%;
			right: 5%;
			margin: 0 auto;
			box-shadow: 0 8rpx 24rpx rgba(103, 194, 58, 0.3);
			transition: all 0.2s;

			&:active {
				transform: scale(0.98);
			}
		}
	}
</style>